<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Organize date selection for the user with the calendar picker component. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Calendar picker - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Calendar picker</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_about">About</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_value">Picker value</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_output">Output value</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_dialog_mode">Dialog mode</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_compact">Compact calendar</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_wide">Wide calendar</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_options">Picker options</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_calendar">Calendar options</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_events">Events</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_calendarpicker_observe">Observe</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Calendar picker</h1>
                <p class="text-leader">
                    Organize date selection for the user with the calendar picker component.
                </p>

                <!-- ads-html -->

                <h3 id="_calendarpicker_about">About</h3>
                <p class="text-small">Updated in 4.2.21</p>
                <p>
                    You can organize date selection for the user with the calendar picker component.
                    To create <code>calendar picker</code> component, add attribute <code>data-role="calendarpicker"</code> to form input element.
                </p>
                <div class="example">
                    <input type="text" data-role="calendarpicker" data-size="280" class="mx-auto" data-dialog-point="360">
                </div>
                <pre><code class="html">
                    &lt;input type="text" data-role="calendarpicker"&gt;
                </code></pre>

                <h3 id="_calendarpicker_value">Picker value</h3>
                <p>
                    You can setup value for picker with attribute <code>value</code>.
                    If you value of date different from ECAMScript date value, you must define format with attribute <code>data-input-format</code>.
                    Input format can contains next parts:
                </p>
                <ul class="unstyled-list">
                    <li><code>dd</code>, <code>%d</code> - day</li>
                    <li><code>mm</code>, <code>%m</code> - month</li>
                    <li><code>yy</code>, <code>%y</code>, <code>yyyy</code> - year</li>
                    <li><code>hh</code>, <code>%h</code> - hours</li>
                    <li><code>ii</code>, <code>%i</code>, <code>mi</code> - minutes</li>
                    <li><code>ss</code>, <code>%s</code> - seconds</li>
                </ul>
                <div class="example">
                    <input type="text" data-role="calendarpicker" data-size="280" class="mx-auto" data-input-format="%d/%m/%y" value="21/12/1972" data-dialog-point="360">
                </div>
                <pre><code class="html">
                    &lt;input type="text" data-role="calendarpicker"
                        data-input-format="%d/%m/%y" value="21/12/1972"&gt;
                </code></pre>

                <h3 id="_calendarpicker_output">Output format</h3>
                <p>
                    By default, output format for picker value defined in <code>METRO_DATE_FORMAT</code> var in have default value is <code>%Y-%m-%d</code>.
                    You can redefine this global or with attribute <code>data-format</code>. Detailed about formatting date value, you can read in <a href="dateformat.html">this article</a>.
                </p>

                <div class="example">
                    <div class="row">
                        <div class="cell-md-4">
                            <p>Default</p>
                            <input type="text" data-role="calendarpicker"  data-dialog-point="360">
                        </div>
                        <div class="cell-md-4">
                            <p>%d %b %Y</p>
                            <input type="text" data-role="calendarpicker" value="1972/12/21" data-format="%d %b %Y" data-dialog-point="360">
                        </div>
                        <div class="cell-md-4">
                            <p>%d %B %Y</p>
                            <input type="text" data-role="calendarpicker" data-format="%d %B %Y" data-dialog-point="360">
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;input type="text" data-role="calendarpicker"&gt;
                    &lt;input type="text" data-role="calendarpicker" value="1972/12/21" data-format="%d %b %Y"&gt;
                    &lt;input type="text" data-role="calendarpicker" data-format="%d %B %Y"&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_calendarpicker_dialog_mode">Dialog mode</h3>
                <p>
                    If you need, (example for small screen), you can set picker into dialog mode.
                    To set it use attribute <code>data-dialog-mode="true"</code> - persistent or <code>data-dialog-point</code>.
                    If you set <code>data-dialog-mode="true"</code>, picker always shown as dialog.
                </p>
                <div class="example">
                    <input type="text" data-role="calendarpicker"  data-dialog-mode="true">
                </div>
                <pre><code>
                    &lt;input type="text" data-role="calendarpicker"  data-dialog-mode="true"&gt;
                </code></pre>
                <p>
                    You can set specific size, when picker shown in dialog mode. Use for it attribute <code>data-dialog-point</code>.
                    Value for this attribute must be a integer value. Metro use this value to build rule: <code>max-width: Xpx</code>.
                </p>
                <div class="example">
                    <input type="text" data-role="calendarpicker"  data-dialog-point="360">
                </div>
                <pre><code>
                    &lt;input type="text" data-role="calendarpicker"  data-dialog-point="360"&gt;
                </code></pre>

                <h3 id="_calendarpicker_compact">Compact mode</h3>
                <p>
                    You can set <code>compact</code> mode for calendar.
                    To set it, use attribute <code>data-cls-calendar="compact"</code>
                </p>
                <div class="example">
                    <input type="text" data-role="calendarpicker" data-cls-calendar="compact">
                </div>
                <pre><code>
                    &lt;input type="text" data-role="calendarpicker"  data-cls-calendar="compact"&gt;
                </code></pre>

                <h3 id="_calendarpicker_wide">Wide mode</h3>
                <p>
                    You can set <code>wide</code> mode for calendar.
                    To set it, use attribute <code>data-calendar-wide="true"</code> - persistent or <code>data-calendar-wide-point</code>
                    where <code>point</code> is one of the <a href="media.html">Metro 4 media point</a> (fs, sm, md, lg, xl, xxl).
                </p>
                <div class="example">
                    <input type="text" data-role="calendarpicker" data-calendar-wide-point="md">
                </div>
                <pre><code>
                    &lt;input type="text" data-role="calendarpicker"  data-calendar-wide-point="md"&gt;
                </code></pre>

                <h3 id="_calendarpicker_options">Picker options</h3>
                <p>
                    Calendar picker has several options, who effects to behavior of the component.
                </p>
                <table class="table cell-border table-border options-table mt-4">
                    <thead>
                    <tr>
                        <th>Option</th>
                        <th>Data-*</th>
                        <th>Default</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>dialogMode</td>
                        <td><code>data-dialog-mode</code></td>
                        <td>false</td>
                        <td>Set picker into dialog mode</td>
                    </tr>
                    <tr>
                        <td>dialogPoint</td>
                        <td><code>data-dialog-point</code></td>
                        <td>360</td>
                        <td>Set max screen width when picker switch into dialog mode</td>
                    </tr>
                    <tr>
                        <td>dialogOverlay</td>
                        <td><code>data-dialog-overlay</code></td>
                        <td>true</td>
                        <td>Create overlay for dialog mode</td>
                    </tr>
                    <tr>
                        <td>overlayColor</td>
                        <td><code>data-overlay-color</code></td>
                        <td>#000000</td>
                        <td>Overlay color</td>
                    </tr>
                    <tr>
                        <td>overlayAlpha</td>
                        <td><code>data-overlay-alpha</code></td>
                        <td>.5</td>
                        <td>Overlay alpha color channel</td>
                    </tr>
                    <tr>
                        <td>locale</td>
                        <td><code>data-locale</code></td>
                        <td>METRO_LOCALE {en-US}</td>
                        <td>Component language</td>
                    </tr>
                    <tr>
                        <td>size</td>
                        <td><code>data-size</code></td>
                        <td>100%</td>
                        <td>Component size</td>
                    </tr>
                    <tr>
                        <td>format</td>
                        <td><code>data-format</code></td>
                        <td>%Y/%m/%d</td>
                        <td>Output date format</td>
                    </tr>
                    <tr>
                        <td>inputFormat</td>
                        <td><code>data-input-format</code></td>
                        <td>null</td>
                        <td>Input date format</td>
                    </tr>
                    <tr>
                        <td>clearButton</td>
                        <td><code>data-clear-button</code></td>
                        <td>false</td>
                        <td>Show/hide clear button</td>
                    </tr>
                    <tr>
                        <td>clearButtonIcon</td>
                        <td><code>data-clear-button-icon</code></td>
                        <td>&lt;span class='mif-cross'&gt;&lt;/span&gt;</td>
                        <td>Icon for clear button</td>
                    </tr>
                    <tr>
                        <td>calendarButtonIcon</td>
                        <td><code>data-calendar-button-icon</code></td>
                        <td>&lt;span class='mif-calendar'&gt;&lt;/span&gt;</td>
                        <td>Icon for show calendar button</td>
                    </tr>
                    <tr>
                        <td>clsPicker</td>
                        <td><code>data-cls-picker</code></td>
                        <td></td>
                        <td>Additional class for calendarpicker</td>
                    </tr>
                    </tbody>
                </table>


                <h3 id="_calendarpicker_calendar">Calendar options</h3>
                <p>
                    Calendar picker has several options, who effects to behavior of the picker calendar.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Option</th>
                        <th>Data-*</th>
                        <th>Default</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>yearsBefore</td>
                        <td><code>data-years-before</code></td>
                        <td>100</td>
                        <td>Years before today</td>
                    </tr>
                    <tr>
                        <td>yearsAfter</td>
                        <td><code>data-years-after</code></td>
                        <td>100</td>
                        <td>Years after today</td>
                    </tr>
                    <tr>
                        <td>weekStart</td>
                        <td><code>data-week-start</code></td>
                        <td>0</td>
                        <td>Start month from sunday or monday (0 - sunday, 1 - monday)</td>
                    </tr>
                    <tr>
                        <td>outside</td>
                        <td><code>data-outside</code></td>
                        <td>true</td>
                        <td>Show dates outside from month (prev or next month dates)</td>
                    </tr>
                    <tr>
                        <td>ripple</td>
                        <td><code>data-ripple</code></td>
                        <td>false</td>
                        <td>Add ripple effect to click</td>
                    </tr>
                    <tr>
                        <td>rippleColor</td>
                        <td><code>data-ripple-color</code></td>
                        <td>#cccccc</td>
                        <td>Ripple color</td>
                    </tr>
                    <tr>
                        <td>exclude</td>
                        <td><code>data-exclude</code></td>
                        <td>null</td>
                        <td>Dates can be excluded from selection</td>
                    </tr>
                    <tr>
                        <td>special</td>
                        <td><code>data-special</code></td>
                        <td>null</td>
                        <td>Dates, who can be selected</td>
                    </tr>
                    <tr>
                        <td>minDate</td>
                        <td><code>data-min-date</code></td>
                        <td>null</td>
                        <td>Min date</td>
                    </tr>
                    <tr>
                        <td>maxDate</td>
                        <td><code>data-max-date</code></td>
                        <td>null</td>
                        <td>Max date</td>
                    </tr>
                    <tr>
                        <td>showHeader</td>
                        <td><code>data-show-header</code></td>
                        <td>true</td>
                        <td>Show or hide calendar header</td>
                    </tr>
                    <tr>
                        <td>clsToday</td>
                        <td><code>data-cls-today</code></td>
                        <td></td>
                        <td>Additional class for today</td>
                    </tr>
                    <tr>
                        <td>clsSelected</td>
                        <td><code>data-cls-selected</code></td>
                        <td></td>
                        <td>Additional class for selected</td>
                    </tr>
                    <tr>
                        <td>clsExclude</td>
                        <td><code>data-cls-exclude</code></td>
                        <td></td>
                        <td>Additional class for excluded</td>
                    </tr>
                    <tr>
                        <td>clsCalendar</td>
                        <td><code>data-cls-calendar</code></td>
                        <td></td>
                        <td>Additional class calendar</td>
                    </tr>
                    <tr>
                        <td>clsCalendarHeader</td>
                        <td><code>data-cls-calendar-header</code></td>
                        <td></td>
                        <td>Additional class for calendar header</td>
                    </tr>
                    <tr>
                        <td>clsCalendarContent</td>
                        <td><code>data-cls-calendar-content</code></td>
                        <td></td>
                        <td>Additional class for calendar content</td>
                    </tr>
                    <tr>
                        <td>clsCalendarMonths</td>
                        <td><code>data-cls-calendar-months</code></td>
                        <td></td>
                        <td>Additional class for calendar months</td>
                    </tr>
                    <tr>
                        <td>clsCalendarYears</td>
                        <td><code>data-cls-calendar-years</code></td>
                        <td></td>
                        <td>Additional class for calendar years</td>
                    </tr>
                    </tbody>
                </table>

                <!-- ads-html -->

                <h3 id="_calendarpicker_events">Events</h3>
                <p>
                    When <code>picker</code> works, it generated the numbers of events. You can use callback for this event to behavior with picker.
                    Rules for working with events are described on <a href="events.html">this page</a>.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data-*</th>
                        <th>Default</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>onDayClick(sel, day, el)</code></td>
                        <td><code>data-on-day-click</code></td>
                        <td>Metro.noop</td>
                        <td>Callback for day click</td>
                    </tr>
                    <tr>
                        <td><code>onCalendarShow(el, cal)</code></td>
                        <td><code>data-on-calendar-show</code></td>
                        <td>Metro.noop</td>
                        <td>Callback for calendar was showed</td>
                    </tr>
                    <tr>
                        <td><code>onCalendarHide(el, cal)</code></td>
                        <td><code>data-on-calendar-hide</code></td>
                        <td>Metro.noop</td>
                        <td>Callback for calendar was hiding</td>
                    </tr>
                    <tr>
                        <td><code>onChange(val, date, el)</code></td>
                        <td><code>data-on-change</code></td>
                        <td>Metro.noop</td>
                        <td>Callback for picker value was changed</td>
                    </tr>
                    <tr>
                        <td><code>onMonthChange(...)</code></td>
                        <td><code>data-on-month-change</code></td>
                        <td>Metro.noop</td>
                        <td>Callback for picker month value was changed</td>
                    </tr>
                    <tr>
                        <td><code>onYearChange(...)</code></td>
                        <td><code>data-on-year-change</code></td>
                        <td>Metro.noop</td>
                        <td>Callback for picker year value was changed</td>
                    </tr>
                    <tr>
                        <td><code>onCalendarPickerCreate(el)</code></td>
                        <td><code>data-on-calendar-picker-create</code></td>
                        <td>Metro.noop</td>
                        <td>Callback fired when picker is created</td>
                    </tr>
                    </tbody>
                </table>
                <p>
                    Select date in first picker and see change values in second picker
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-6">
                            <input type="text" data-role="calendarpicker" id="dp2" data-on-change="$('#dp1').attr('value', (arguments[0]))">
                        </div>
                        <div class="cell-md-6">
                            <input type="text" data-role="calendarpicker" id="dp1" data-format="%d %b %Y">
                        </div>
                    </div>
                </div>
                <pre><code>
                    &lt;input type="text"
                        data-role="calendarpicker" id="dp2"
                        data-on-change="$('#dp1').attr('value', (arguments[0]))"&gt;

                    &lt;input type="text"
                        data-role="calendarpicker" id="dp1" data-format="%d %b %Y"&gt;
                </code></pre>

                <h3 id="_calendarpicker_methods">Methods</h3>
                <p>
                    You can use picker method <code>val()</code> to set or get picker value in javascript. Also you can set or get picker value with using <code>value</code> attribute.
                </p>
                <div class="example">
                    <input type="text" data-role="calendarpicker" value="1972/12/21" data-size="280" id="calendarpicker_val_test" data-format="%d %B %Y" class="">
                    <br />
                    <button class="button" onclick="$('#calendarpicker_val_test').data('calendarpicker').val('1972/12/21')">Reset</button>
                    <button class="button" onclick="$('#calendarpicker_val_test').data('calendarpicker').val('2017/10/25')">Set 2017/10/25</button>
                    <button class="button" onclick="alert($('#calendarpicker_val_test').data('calendarpicker').val())">Get date</button>
                </div>
                <pre><code>
                    var cal = $(element).data("calendarpicker");
                    console.log(cal.val());
                    cal.val("1972/12/21");
                </code></pre>

                <h3 id="_calendarpicker_observe">Observe</h3>
                <p>
                    You can change attributes
                    <code>value</code>,
                    <code>disabled</code>
                    <code>data-locale</code>
                    at runtime and picker will be updated.
                </p>

                <div class="example">
                    <div class="d-flex flex-justify-center mb-4">
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">en-US</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">de-DE</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">hu-HU</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">uk-UA</button>
                        <button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())">ru-RU</button>
                    </div>

                    <input type="text" data-role="calendarpicker" id="calendarpicker_locale">
                </div>
                <pre><code class="html">
                    &lt;div class="d-flex flex-justify-center mb-4"&gt;
                        &lt;button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())"&gt;en-US&lt;/button&gt;
                        &lt;button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())"&gt;de-DE&lt;/button&gt;
                        &lt;button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())"&gt;hu-HU&lt;/button&gt;
                        &lt;button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())"&gt;uk-UA&lt;/button&gt;
                        &lt;button class="button m-1" onclick="$('#calendarpicker_locale').attr('data-locale', $(this).text())"&gt;ru-RU&lt;/button&gt;
                    &lt;/div&gt;

                    &lt;input type="text" data-role="calendarpicker" id="calendarpicker_locale"&gt;
                </code></pre>
            </main>
        </div>
    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>